import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Row, Col, Button, Input, Divider, List, Form, Select, Cascader, Alert, Modal } from 'antd';
import router from 'umi/router';
import Authorized from '@/utils/Authorized';
import styles from './index.less';


const Option = Select.Option;

@connect(({ competition }) => ({
  competition: competition.competition
}))
@Form.create()
class Enroll extends PureComponent {

  componentDidMount() {
    const { match: { params: { id } }, dispatch } = this.props;
    dispatch({
      type: 'competition/getCompetitionDetail',
      payload: {
        competitionId: id,
      }
    })
  }

  onValidateForm = () => {
    const {
      form: { validateFieldsAndScroll },
      dispatch,
      match: { params: { id } },
    } = this.props;
    validateFieldsAndScroll((error, values) => {
      if (!error) {
        console.log(values)
        // submit the values
        dispatch({
          type: 'competition/enrollCompetition',
          payload: {
            competitionId: id,
          },
          callback: (res) => {
            if (res.data === "成功") {
              let secondsToGo = 5;
              const modal = Modal.info({
                title: '报名成功',
                content: (
                  <div>
                    <p>请注意竞赛开始时间</p>
                    <p>及时提交作品避免错过时间</p>
                    <p>{`${secondsToGo}秒后自动关闭该窗口.`}</p>
                  </div>
                ),
              });
              const timer = setInterval(() => {
                secondsToGo -= 1;
                modal.update({
                  content: (
                    <div>
                      <p>请注意竞赛开始时间</p>
                      <p>及时提交作品避免错过时间</p>
                      <p>{`${secondsToGo}秒后自动关闭该窗口.`}</p>
                    </div>
                  ),
                });
              }, 1000);
              setTimeout(() => {
                clearInterval(timer);
                modal.destroy();
                router.push(`/preview/competition/${id}/publicity`)
              }, secondsToGo * 1000);
            }else if(res.msg === "失败"){
              Modal.error({
                title: '提交失败',
                content: '如果已经提交请勿重复提交',
                onOk() {
                  router.push(`/preview/competition/${id}/publicity`)
                },
              });
              
            }
          }
        })
      }
    });
  };

  render() {
    const { match: { params: { id } },
      competition,
      form: { getFieldDecorator } } = this.props;
    console.log(competition)
    return (
      <div>
        <Row type="flex" justify="center">
          <Col span={16}>
            <Card bordered={false} style={{ backgroundImage: `linear-gradient(to right, #1890ff 0%, #6f86d6 100%)`, margin: 20 }}>
              <span style={{ fontSize: 24, color: `white` }}>报名表</span>
            </Card>
          </Col>
        </Row>
        <Row type="flex" justify="center">
          <Col span={16}>
            <Card bordered={false} style={{ backgroundImage: `linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%)`, margin: 20 }}>
              <Alert message="参赛信息用于颁发奖品，请认真填写" type="info" />
              <Row>
                <Form>
                  <List
                    rowKey="id"
                    grid={{ gutter: 24, lg: 4, md: 3, sm: 2, xs: 1 }}
                    dataSource={competition&&competition.fillInItemVo}
                    renderItem={item =>
                      item ? (
                        <List.Item key={item.id}>
                          <Form.Item label={item.title}>
                            {getFieldDecorator(`fill_${item.id}`, {
                              rules: [{ required: true, message: '' }],
                            })(<Input placeholder={item.title} />)}
                            {/* <span className={styles.showSpan}>{item.title}</span> :
                            <Input key={item.id}  /> */}
                          </Form.Item>
                        </List.Item>
                      ) : (
                          null
                        )
                    }
                  />
                </Form>
              </Row>
              <Row>
                <Form>
                  <List
                    rowKey="id"
                    grid={{ gutter: 24, lg: 4, md: 3, sm: 2, xs: 1 }}
                    dataSource={competition&&competition.singleLevelOptionVo}
                    renderItem={item =>
                      item ? (
                        <List.Item key={item.id}>
                          <Form.Item label={item.title}>
                            {getFieldDecorator(`single_${item.id}`, {
                              rules: [{ required: true, message: '' }],
                            })(<Select style={{ width: `90%` }}>
                              {item.option && item.option.map((value1, index1) => (
                                <Option key={index1} value={value1}>{value1}</Option>
                              ))}
                            </Select>)}
                          </Form.Item>
                        </List.Item>
                      ) : (
                          null
                        )
                    }
                  />
                </Form>
              </Row>
              <Row>
                <Form>
                  <List
                    rowKey="id"
                    grid={{ gutter: 24, lg: 4, md: 3, sm: 2, xs: 1 }}
                    dataSource={competition&&competition.doubleLevelOptionVo}
                    renderItem={item =>
                      item ? (
                        <List.Item key={item.id}>
                          <Form.Item label={item.title}>
                            {getFieldDecorator(`double_${item.id}`, {
                              rules: [{ required: true, message: `${item.title}必须填写` }],
                            })(<Cascader style={{ width: `90%` }} options={item.option} />)}
                          </Form.Item>
                        </List.Item>
                      ) : (
                          null
                        )
                    }
                  />
                </Form>
              </Row>
              <Authorized authority="user">
                <Button type="primary" onClick={this.onValidateForm}>
                  提交
                </Button>
              </Authorized>
              {/* <Authorized authority="admin">
                <Button type="primary">
                  提交
                </Button>
              </Authorized> */}
            </Card>
          </Col>
        </Row>
      </div>
    )
  }

}
export default Enroll
